<template>
	<view>
		<view class="group">
			<view class="group-item left-group" @tap="openUrl('add')">
				<view class="image-view">
					<image class="image" src="../../static/images/icon/quanzi/chuangjian.png"/>	
				</view>
				<view class="content">
					<view class="title1">创建圈子</view>
					<view class="title2">方便快速发送</view>
				</view>
			</view>
			<view class="shuxian"></view>
			<view class="group-item right-group" @tap="openUrl('join')">
				<view class="image-view">
					<image class="image" src="../../static/images/icon/quanzi/jiaru.png"/>	
				</view>
				<view class="content">
					<view class="title1">加入圈子</view>
					<view class="title2">已存在的圈子</view>
				</view>
			</view>
		</view>
		<view class="circle">
			<view class="circle-list" v-for="(item,index) in circleLst" :key="index" :class="item.is_me == -1?'height1':''">
				<view class="circle-list-name">
					<view class="name fl">{{item.name}}</view>
					<view class="right-name fl">
						<text class="right-title" v-if="item.is_me == 1"  @tap="opeFunc('edit',index)">圈子管理</text>
						<text class="right-title" v-else v-if="item.is_me == -1 && item.saveJoinDetail == true"  @tap="opeFunc('edit-join',index)">修改资料</text>
						<text class="iconfont icon-youjiantou"></text></view>
				</view>
				<view class="circle-list-ope flex align-center flex-wrap">
					<view class="ope-list" @tap="opeFunc('join_user',index)">
						<view class="title"><text>{{item.join_count}}</text></view>
						<view class="desc">加入人数</view>
					</view>
					<view class="ope-list" v-if="item.is_me == -1" @tap="opeFunc('loginout',index)">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/shanchu.png"></image>
						</view>
						<view class="desc">退出圈子</view>  
					</view>
					<view class="ope-list" @tap="opeFunc('share',index)">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/kouling.png"></image>
						</view>
						<view class="desc">圈子口令</view>
					</view>
					<view class="ope-list" @tap="opeFunc('share',index)">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/yaoqingjiaru.png"></image>
						</view>
						<view class="desc">邀请加入</view>
					</view>
					<view class="ope-list" @tap="opeFunc('del',index)" v-if="item.is_me == 1">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/shanchu.png"></image>
						</view>
						<view class="desc">删除圈子</view>
					</view>
					<view class="ope-list" v-if="item.is_me == 1" @tap="opeFunc('fqdk',index)">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/faqidaka.png"></image>
						</view>
						<view class="desc">发起打卡</view>  
					</view>
					<view class="ope-list" v-if="item.is_me == 1"  @tap="opeFunc('fqtj',index)">
						<view class="title">
							<image class="iconfont" src="../../static/images/icon/quanzi/faqitongji.png"></image>
						</view>
						<view class="desc">发起统计</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script src="./group.js"></script>

<style lang="scss">
	.circle{
		.circle-list{
			background-color: #ffffff;
			width: 96%;
			height: 370rpx;   
			margin: 20rpx auto;
			border-radius: 20rpx;
			position: relative;
			padding: 0rpx 20rpx;
			.circle-list-name{
				height: 80rpx;
				border-bottom: 2rpx solid #eee;
				line-height: 80rpx;
				.name{
					font-size: 30rpx;
					font-weight: 600;
					width: 60%;
				}
				.right-name{
					width: 40%;
					text-align: right;
					.right-title{
						font-size: 28rpx;
						color: #666666;
						margin-right: 6rpx;
					}
					.iconfont{
						font-size: 28rpx;
					}
				}
			}
			.circle-list-ope{
				clear: both;
				height: 140rpx;
				text-align: center;
				.ope-list{
					width: 25%;
					height: 100%;
					.title{  
						height: 90rpx;
						line-height: 90rpx;
						font-size: 34rpx;
						.iconfont{
							width: 50rpx;
							height: 50rpx;
							margin-top: 20rpx;
						}
					}
					.desc{
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
		.height1{
			height: 230rpx;
		}
	}
	.group{
		background-color: #ffffff;
		width: 96%;
		height: 160rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		position: relative;
		.shuxian{
			width: 2rpx;
			height: 60rpx;
			position: absolute;
			top: 50rpx;
			left: 50%;
			background-color: #EEEEEE;
		}
		.group-item{
			width: 50%;
			height: 100%;
			float: left;
			.image-view{
				width: 40%;
				float: left;
				height: 100%;
				.image{
					width: 80rpx;
					height: 80rpx;
					margin: 36rpx 0 0 50rpx;
				}
			}
			.content{
				width: 60%;
				height: 100%;
				float: left;
				.title1{
					width: 100%;
					height: 40rpx;
					font-size: 30rpx;
					line-height: 40rpx;
					overflow: hidden;
					margin-top: 38rpx;
					letter-spacing: 2rpx;
				}
				.title2{
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					color: #999;
					font-size: 25rpx;
					margin-top: 10rpx;
					letter-spacing: 1rpx;
				}
			}
			
		}
	}
</style>
